<template>
  <div>
    <el-drawer title="审核建议" v-model="visible" size="95%">
      <template #header>
        <div class="flex items-center title">
          <div class="w-[5px] h-[5px] rounded-[50%] bg-[#3721FF] mr-[10px] circle"></div>
          <div class="tits">审核建议</div>
        </div>
      </template>
      <div class="w-full h-[1px] bg-[#EFEFEF] line"></div>
      <div class="pt-[30px]">
        <div class="text-[#077BFF] bg-[#EBEEFB] rounded-[4px] px-[20px] py-[10px] type">
          审核建议：{{ props.curAuditStr }}
        </div>
        <div class="my-[20px] btnbox">
          <el-button :disabled="btnDisabled" @click="handleChangeStatus('audit')">
            审核通过
          </el-button>
          <el-button :disabled="btnDisabled" @click="handleChangeStatus('invalid')">
            无效订单
          </el-button>
          <el-button :disabled="btnDisabled" @click="handleChangeStatus('waitConfirm')">
            待确认
          </el-button>
        </div>
        <el-table :data="list" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55" />
          <el-table-column label="订单号/IP地址" width="200">
            <template #default="{ row }">
              <div
                class=" text-[#231E47] text-[14px] cursor-pointer mr-20px py-[8px] font-normal"
                v-copyText="row.orderNo"
              >
                {{ row.orderNo }}
                <Icon icon="ep:copy-document" :size="12" class="cursor-pointer" />
              </div>
              <div>{{ row.ipAddress }}</div>
            </template>
          </el-table-column>
          <el-table-column label="地区" prop="areaName" width="80" />
          <el-table-column label="商品信息" min-width="220">
            <template #default="{ row }">
              <div class="mt-[35px] overflow-hidden" :class="row.isExpland ? 'noMaxH' : 'max-h-[120px]'">
                <div class="flex items-center info">
                  <div class="w-[86px] h-[86px] mr-[10PX] left">
                    <el-image
                        :src="row.cover || row.detailList[0].picture"
                        class="!h-[86px] !w-[86px] roundec-[12px]"
                        fit="contain"
                        @click="imagePreview(row.cover || row.detailList[0].picture)"
                      >
                        <template #error>
                          <div class="image-slot">
                            <icon icon="ep:picture" />
                          </div>
                        </template>
                      </el-image>
                  </div>
                  <div class="right">
                    <div class="text-[14px] text-[#dfc437] pt-[8px]">{{ row.thaliName }}</div>
                    <div class="flex pt-[4px] pb-[4px]  flex-wrap" v-for="(item, index) in row.detailList" :key="index" :style="index < row.detailList.length - 1 ? 'border-bottom:1px dashed #999' : ''">
                        <div class="cursor-pointer info"  @click="openUrl(row.orderLink)">
                          <!-- <ElTooltip :content="item.productName" placement="top"> -->
                            <!-- overflow-ellipsis -->
                            <div class="text-cut text-[12PX] w-[180PX] text-[#077BFF]">
                              {{item.code}} - {{ item.productName }}
                            </div>
                          <!-- </ElTooltip> -->
                          <div class="flex items-center  text-[12px] numbox"> <span class="text-[#231E47]">({{item.sku}})</span> * <span class="text-[#999]">{{ item.number }}</span> </div>
                          <!-- <div class="text-[#999] text-[14px] numbox"> 商品ID: {{ item.productId }} </div> -->
                        </div>
                    </div>
                  </div>
                </div>
                
              </div>
              <div class="cursor-pointer text-[#077BFF]" @click="changeExpland(row)"> {{ row.isExpland ? '收起' : '展开' }}</div>
            </template>
          </el-table-column>
          <el-table-column label="下单信息" min-width="180">
            <template #default="{ row }">
              <div>
                <div>买家：{{ row.customerName }}</div>
                <div>买家手机：{{ row.customerPhone }}</div>
                <div class="">
                  <img :src="StarPng" class="w-[14px] h-14px" alt="" v-if="row.remoteFlag" />
                  地址：{{ row.detailAddress }}{{ row.houseNumber }}
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="物流方式" prop="logisticsMethodName" />
          <el-table-column label="订单总金额">
            <template #default="{ row }"> 
              <div>{{ row.currencySymbol }} {{ row.orderAmount }} </div>
              <div v-if="row.orderFreight " class="text-[12px] text-[#666]">(含运费{{ row.currencySymbol }} {{ row.orderFreight }})</div>  
              <div>￥ {{ row.orderAmountCny || '-' }}</div>
            </template>
          </el-table-column>
          <el-table-column label="归属部门/成员" width="120">
            <template #default="{ row }">
              <div v-if="row.deptName && row.createName"> {{ row.deptName }}/{{ row.createName }} </div>
              <div v-else-if="row.deptName && !row.createName">
                {{ row.deptName }}
              </div>
              <div v-else-if="row.createName && !row.deptName">
                {{ row.createName }}
              </div>
              <div v-else>-</div>
            </template>
          </el-table-column>
          <el-table-column label="订单状态" width="120">
            <template #default="{ row }">
              <div class="flex justify-center items-center statusbox">
                <div
                  class="px-[7px] py-[2px] flex items-center rounded-[5px]"
                  :style="`background-color:${orderStatus[row.status].bgColor}`"
                >
                
                  <div class="w-[12px] h-[12px] rounded-[50%] relative mr-[4px] icon">
                    <img
                      :src="orderStatus[row.status].icon"
                      class="w-full h-full object-contain absolute top-0 left-0"
                    />
                  </div>
                  <div
                    class="text-[12px] status txt"
                    :style="`color:${orderStatus[row.status].color}`"
                  >
                    {{ orderStatus[row.status].name }}</div
                  >
                </div>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="无效原因" prop="invalidReason" width="100" />
          <el-table-column label="留言/备注" width="200">
            <template #default="{ row }">
              <div class="flex items-start items">
                <div class="shrink-0 label">留言：</div>
                <div class="val">{{ row.message }}</div>
              </div>
              <div class="flex items-start items">
                <div class="shrink-0 label">备注：</div>
                <div class="val">{{ row.remark }}</div>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="创建时间/更新时间" width="180">
            <template #default="{ row }">
              <div class="text-[13px] text-[#666]">{{ formatDate(row.createTime) }}</div>
              <div class="text-[13px] text-[#666]">{{ formatDate(row.updateTime) }}</div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-drawer>
  </div>
</template>

<script setup lang="ts">
import * as TradeOrderApi from '@/api/mall/trade/order'
import { usePageLoading } from '@/hooks/web/usePageLoading'
import StarPng from '@/assets/mall/trade/order/star.png'
import { orderStatus } from '@/utils/order'
import { formatDate } from '@/utils/formatTime'
import { createImageViewer } from '@/components/ImageViewer'

const { loadStart, loadDone } = usePageLoading()
const emit = defineEmits(['updateOrderStatus', 'clearSelect'])
const props = defineProps({
  orderNo: {
    type: [String, Number],
    required: true,
    default: ''
  },
  curAuditStr: {
    type: String,
    default: ''
  }
})
type RemarkInfo = {
  remark: string
  id: string | number
}

const visible = ref(false)

const btnDisabled = ref(true)

const selectRow = ref([])

const list = ref([])

const getList = async () => {
  try {
    loadStart()
    const res = await TradeOrderApi.getAuditOrderList(props.orderNo as number, props.curAuditStr)
    list.value = res
  } finally {
    loadDone()
  }
}

watch(
  () => [props.orderNo, props.curAuditStr],
  () => {
    if (props.orderNo) {
      // getList()
    }
  },
  { immediate: true, deep: true }
)

/**
 * 获取选中行信息
 */
const handleSelectionChange = (val) => {
  selectRow.value = val
  if (selectRow.value.length > 0) {
    btnDisabled.value = false
  } else {
    btnDisabled.value = true
  }
}
/** 商品图预览 */
const imagePreview = (imgUrl: string) => {
  createImageViewer({
    urlList: [imgUrl]
  })
}
/**
 * 展开/收起
*/
const changeExpland = (row) => {
  row.isExpland = !row.isExpland
}
const openUrl = (url: string) => {
  //校驗url
  if(!url) return
  if( url.indexOf('http') > -1 || url.indexOf('https') > -1){
    window.open(url)
  }else{
    ElMessage.error('链接不合法')
  }
}

/**
 * 提交修改
 */
const handleChangeStatus = (actionName: string) => {
  let isOk = true
  if (actionName === 'audit') {
    selectRow.value.map((item) => {
      if (!isOk) return
      if (item.status === 3 || item.status === 4) {
        isOk = false
      }
    })
    if (!isOk) {
      ElMessage.error('选中数据中包含已审核，请重新选择')
      return
    }
  } else if (actionName === 'invalid') {
    selectRow.value.map((item) => {
      if (!isOk) return
      if (item.status === 9) {
        isOk = false
      }
    })
    if (!isOk) {
      ElMessage.error('选中数据中包含无效订单，请重新选择')
      return
    }
  } else if (actionName === 'waitConfirm') {
    selectRow.value.map((item) => {
      if (!isOk) return
      if (item.status === 2) {
        isOk = false
      }
    })
    if (!isOk) {
      ElMessage.error('选中数据中包含待确认订单，请重新选择')
      return
    }
  }
  emit('updateOrderStatus', selectRow.value, actionName)
}

const show = () => {
  visible.value = true
  nextTick(() => {
    getList()
  })
}

const hide = () => {
  visible.value = false
  // 清空选中 这儿一定要清空，避免影响主表
  emit('clearSelect')
}

defineExpose({
  show,
  hide,
  getList
})
</script>

<style lang="scss" scoped>
:deep(.el-drawer__header) {
  margin-bottom: 0px;
}
:deep(.el-select__wrapper) {
  height: 40px !important;
}
:deep(.el-input__wrapper) {
  height: 40px !important;
}
</style>
